<template>
  <div>
    <!--背景画布-->
    <PageWrapper contentBackground contentClass="p-4">
      <!--标签页-->
      <Tabs :animated="true" v-model:activeKey="activeKey">
        <TabPane v-for="(item, index) in navBarList" :key="index.toString()">
          <!--使用插槽为标签页添加图标-->
          <template #tab>
            <Icon :icon="item.icon" />
            {{ item.name }}
          </template>
          <!--标签内容-->
          <TabsInfo :tab-type="activeKey" />
        </TabPane>
      </Tabs>
    </PageWrapper>
  </div>
</template>
<script lang="ts" setup>
  import { navBarList } from './components/setting.data';
  import { PageWrapper } from '/@/components/Page';
  import TabsInfo from './components/TabsInfo.vue';
  import Icon from '/@/components/Icon/src/Icon.vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { ref } from 'vue';
  const activeKey = ref('0');
</script>
